import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Flex } from '@ant-design/react-native';

const styles = StyleSheet.create({
  fieldFlexItem: {
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  labelText: {
    fontSize: 14,
    flexShrink: 1,
    fontWeight: '100',
    color: '#000000',
  },
  fieldText: {
    marginBottom:5,
    marginLeft: 10,
    fontSize: 16,
    flexShrink: 1,
  },
});

export default function FlexTextField({
  fieldValue,
  label,
  labelStyle,
  valueStyle,
  flexItemStyle,
  flex,
}) {
  let { fontSize } = styles.labelText;
  if (labelStyle && labelStyle.fontSize) {
    fontSize = labelStyle.fontSize;
  }
  const labelSizeStyle = {
    width: fontSize * label.length * 1.05,
  };
  return (
    <Flex.Item
      style={[styles.fieldFlexItem, flexItemStyle, { flex: flex || 1 }]}
    >
      <Text style={[styles.labelText, labelSizeStyle, labelStyle]}>
        {label}
      </Text>
      {!React.isValidElement(fieldValue) ? (
        <Text style={[styles.fieldText, valueStyle /*, {width: '55%'} */]}>
          {fieldValue}
        </Text>
      ) : (
        fieldValue
      )}
    </Flex.Item>
  );
}
